<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebGL index</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <h1>WebGL & Canvas Comparison</h1>
    <div class="content">
        <div id="accordion">
            <div class="card" id="point">
                <div class="card-header" id="headingOne">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Point
                        </button>
                    </h5>
                </div>
                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        <form id="point-form">
                            <div class="form-group">
                                <select class="custom-select" id="pointShape">
                                    <option selected class="holder">Point Shape</option>
                                    <option value="square">square </option>
                                    <option value="round">round </option>
                                </select>
                            </div>
                            <div class="form-group">
                                <input type="number" id="pointSize" placeholder="Point Size">
                            </div>
                            <div class="form-group">
                                <input type="number" id="pointNumber" placeholder="Point Number">
                            </div>
                            <div class="form-group" data-type="point-form">
                                <button type="button" data-button-type="Webgl" class="btn btn-primary">Webgl</button>
                                <button type="button" data-button-type="canvas" class="btn btn-primary">Canvas</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingTwo">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            Line
                        </button>
                    </h5>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                    <div class="card-body">
                        <form id="line-form">
                            <div class="form-group">
                                <select class="custom-select" id="lineStyle">
                                    <option selected class="holder">Line Style</option>
                                    <option value="General">General</option>
                                    <option value="dashArray">Dash Array</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <select class="custom-select" id="lineCap">
                                    <option selected class="holder">Line Cap</option>
                                    <option value="butt">butt</option>
                                    <option value="round">round</option>
                                    <option value="square">square</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <select class="custom-select" id="lineJoin">
                                    <option selected class="holder">Line Join </option>
                                    <option value="round">round </option>
                                    <option value="bevel">bevel </option>
                                </select>
                            </div>
                            <div class="form-group">
                                <input type="number" id="lineSize" placeholder="Line Size">
                            </div>
                            <div class="form-group">
                                <input type="number" id="pathNumber" placeholder="Path Number">
                            </div>
                            <div class="form-group">
                                <input type="number" id="pathPointNum" placeholder="Point Number">
                            </div>
                            <div id="dash-array-line-dash" class="dash-array-line-dash-display">
                                <div class="form-group">
                                    <input type="number" id="solidLength" placeholder="Solid Length">
                                </div>
                                <div class="form-group">
                                    <input type="number" id="emptyLength" placeholder="Empty Length">
                                </div>
                            </div>
                            <div class="form-group" data-type="line-form">
                                <button type="button" data-button-type="Webgl" class="btn btn-primary">Webgl</button>
                                <button type="button" data-button-type="canvas" class="btn btn-primary">Canvas</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingThree">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            Polygon
                        </button>
                    </h5>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                    <div class="card-body">
                        <form id="polygon-form">
                            <div class="form-group">
                                <input type="number" data-tag="polygonNumber" class="form-control" placeholder="polygonNumber">
                            </div>
                            <div class="form-group">
                                <input type="number" data-tag="pointNumForEachPolygon" class="form-control" placeholder="pointNumForEachPolygon">
                            </div>
                            <div class="form-group" data-type="polygon-form">
                                <button type="button" data-button-type="Webgl" class="btn btn-primary">Webgl</button>
                                <button type="button" data-button-type="canvas" class="btn btn-primary">Canvas</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingFour">
                    <h5 class="mb-0">
                        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                            Text
                        </button>
                    </h5>
                </div>
                <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
                    <div class="card-body">
                        <form id="text-form">
                            <div class="form-group">
                                <input type="text" data-tag="textContent" class="form-control" placeholder="textContent">
                            </div>
                            <div class="form-group">
                                <input type="number" data-tag="textNumber" class="form-control" placeholder="textRepeatNumber">
                            </div>
                            <div class="form-group">
                                <input type="number" data-tag="fontSize" class="form-control" placeholder="fontSize">
                            </div>
                            <div class="form-group">
                                <input type="number" data-tag="lineWarpWidth" class="form-control" placeholder="lineWarpWidth">
                            </div>
                            <div class="form-group" data-type="text-form">
                                <button type="button" data-button-type="Webgl" class="btn btn-primary">Webgl</button>
                                <button type="button" data-button-type="canvas" class="btn btn-primary">canvas</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="stage">
            <div class="webgl">
                <h2>WebGL </h2>
                <p class="text">
                    <span>Time: </span>
                    <span id="webglTime"></span>
                </p>
                <canvas id="webgl" width="800" height="800"></canvas>
            </div>

            <div class="canvas">
                <h2>Canvas </h2>
                <p class="text">
                    <span>Time: </span>
                    <span id=canvasTime></span>
                </p>
                <canvas id="canvas" width="800" height="800"></canvas>
            </div>
        </div>
    </div>


    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
    <script src="./js/lib/lib.js"></script>
    <script src="./dist/bundle.js"></script>
    <!-- <script src="./temp/bundle.js"></script> -->

</body>

</html>